https://mp.weixin.qq.com/s/mwgqwedR9GdUXRodAdfprg

前端埋点是指在前端页面中嵌入代码，用于收集和跟踪用户行为数据。

<!-- 在前端埋点中，常用的方式包括： -->

1. 页面加载埋点：用于追踪和监测页面的加载时间、渲染状态等信息。
2. 点击事件埋点：通过监听用户的点击事件，记录用户点击了哪些元素、触发了什么操作，以及相关的参数信息。
3. 表单提交埋点：记录用户在表单中输入的内容，并在用户提交表单时将这些数据发送到后台进行保存和分析。
4. 页面停留时间埋点：用于记录用户在页面停留的时间，以及用户与页面的交互行为，如滚动、鼠标悬停等。
5. AJAX请求埋点：在前端的AJAX请求中添加额外的参数，用于记录请求的发送和返回状态，以及相应的数据。

埋点数据可以通过 后端API 或 第三方数据分析工具（百度统计、Google Analytics） 发送到服务器进行处理和存储

<!-- 前端埋点设计方案有哪些？ -->

1. 事件监听：通过监听用户的点击、滚动、输入等事件，记录用户的操作行为。

    可以使用JavaScript来实现事件监听，例如使用addEventListener()函数进行事件绑定。

2. 自定义属性：在HTML元素中添加自定义属性，用于标识不同的元素或事件。

    例如，在按钮上添加data-*属性，表示不同的按钮类型或功能。当用户与这些元素进行交互时，可以获取相应的属性值作为事件标识。

3. 发送请求：当用户触发需要追踪的事件时，可以通过发送异步请求将数据发送到后台服务器。

    可以使用XMLHttpRequest、fetch或者第三方的数据上报SDK来发送请求。

4. 数据格式：确定需要采集的数据格式，包括页面URL、时间戳、用户标识、事件类型、操作元素等信息。

    通常使用JSON格式来封装数据，方便后续的数据处理和分析。

5. 用户标识：对于需要区分用户的情况，可以在用户首次访问时生成一个唯一的用户标识
，并将该标识存储在浏览器的cookie中或使用localStorage进行本地存储。

6. 数据上报：将采集到的数据发送到后台服务器进行存储和处理。

    可以自建后台系统进行数据接收和分析，也可以使用第三方的数据分析工具，例如百度统计、Google Analytics等。

7. 隐私保护：在进行数据采集和存储时，需要注意用户隐私保护。

<!-- react 前端埋点示例 -->

1.使用自定义 Hook 实现
  <script>
  1.1 创建一个名为 useAnalytics.js 的文件，用于存放埋点逻辑：
  // useAnalytics.js

  import { useEffect } from 'react';

  export function useAnalytics() {
    const trackEvent = (eventType, eventData) => {
      // 发送数据请求
      // 模拟请求示例，请根据实际情况修改具体逻辑
      console.log(`Sending ${eventType} event with data:`, eventData);
    };

    useEffect(() => {
      // 页面加载事件
      trackEvent('pageView', {
        pageUrl: window.location.href,
      });
    }, []);

    return {
      trackEvent,
    };
  }
  </script>
  1.2. 在需要进行埋点的组件中引入 useAnalytics 自定义 Hook 并使用：
  <script>
    import { useAnalytics } from './useAnalytics';

  function MyComponent() {
    const { trackEvent } = useAnalytics();

    // 按钮点击事件
    const handleClick = () => {
      trackEvent('buttonClick', {
        buttonId: 'myButton',
      });
    };

    return (
      <button id="myButton" onClick={handleClick}>Click Me</button>
    );
  }

  export default MyComponent;
  </script>

2.使用高阶组件（Higher-Order Component）实现
<script>
2.1. 创建一个名为 withAnalytics.js 的高阶组件文件，用于封装埋点逻辑：
// withAnalytics.js

import React, { useEffect } from 'react';

export function withAnalytics(WrappedComponent) {
  return function WithAnalytics(props) {
    const trackEvent = (eventType, eventData) => {
      // 发送数据请求
      // 模拟请求示例，请根据实际情况修改具体逻辑
      console.log(`Sending ${eventType} event with data:`, eventData);
    };

    useEffect(() => {
      // 页面加载事件
      trackEvent('pageView', {
        pageUrl: window.location.href,
      });
    }, []);

    return <WrappedComponent trackEvent={trackEvent} {...props} />;
  };
}
</script>
<script>
2.2 在需要进行埋点的组件中引入 withAnalytics 高阶组件并使用：
import React from 'react';
import { withAnalytics } from './withAnalytics';

function MyComponent({ trackEvent }) {
  // 按钮点击事件
  const handleClick = () => {
    trackEvent('buttonClick', {
      buttonId: 'myButton',
    });
  };

  return (
    <button id="myButton" onClick={handleClick}>Click Me</button>
  );
}

export default withAnalytics(MyComponent);
</script>